import React, {useState} from 'react';
import {useMount, useSetState} from 'ahooks';
import {Row, Col, Card} from 'antd';
import {querySelectOptions} from '~/service/refundReport';
import CommonSearchBar from '../../../common/CommonSearchBar';
import {convertSearcherParams} from '../../../utils/convert';
import StudentBarChart from '../StudentBarChart';
import StudentPieChart from '../StudentPieChart';
import StudentStructureBarChart from '../StudentStructureBarChart';

const SELECT_UNIT_ID = 'selectUnit_15';
const dIdPre = 'structureStudentsTwoPart_partOne';
const config = [
    {
        type: 'select',
        key: 'school_term_id',
        label: '学季',
        optionsConfig: {
            options: [],
            pager: {}
        },
        props: {
            mode: 'multiple'
        }
    },
    {
        type: 'select',
        key: 'subject_name_lvl1',
        label: '学部',
        optionsConfig: {
            options: [],
            pager: {}
        },
        props: {
            mode: 'multiple'
        }
    },
    {
        type: 'select',
        key: 'employee_city',
        label: '运营中心',
        optionsConfig: {
            options: [],
            pager: {}
        },
        props: {
            mode: 'multiple'
        }
    },
    {
        type: 'select',
        key: 'subject_name_lvl2',
        label: '年级',
        optionsConfig: {
            options: [],
            pager: {}
        },
        props: {
            mode: 'multiple'
        }
    },
];

const CityStructure = () => {
    const [dimensionAndValues, setDimensionAndValues] = useState([]);

    const [selectOptions, setSelectOptions] = useState({});

    const handleOk = fieldsValue => {
        const params = convertSearcherParams(fieldsValue);
        setDimensionAndValues(params);
    };

    const handleReset = e => {
        setDimensionAndValues([]);
    };

    // 请求单个表单配置项
    const handleFetchOptions = ({key, searchKey, pager, isGetingMore, options: curOptions, fieldsValue}) => {
        let permissions = config.map(item => ({
            dimensionId: `${dIdPre}_${item.key}`,
            dimensionName: item.key,
            filterItems: Array.isArray(fieldsValue[item.key])
                ? fieldsValue[item.key]
                : fieldsValue[item.key] == null
                    ? []
                    : [fieldsValue[item.key]]
        }));

        permissions = permissions.filter(item => item.filterItems?.length);

        const params = {
            pager,
            dimensionId: `${dIdPre}_${key}`,
            dimensionName: key,
            searchKey,
            permissions,
            unitId: SELECT_UNIT_ID
        };

        querySelectOptions(params).then(res => {
            const {data, pager} = res;
            let options =
                data.map(item => ({
                    key: item,
                    value: item,
                    label: item
                })) || [];
            // 分页时，累加展示
            if (isGetingMore) {
                options = curOptions.concat(options);
            }
            setSelectOptions({key, options, pager});
        });
    };

    return (
        <div>
            <Card style={{marginBottom: 8}}>
                <CommonSearchBar
                    noCache
                    config={config}
                    initialValues={{}}
                    onOk={handleOk}
                    onReset={handleReset}
                    onfetchOptions={handleFetchOptions}
                    selectOptions={selectOptions}
                />
            </Card>
            <Card>
                <Row>
                    <Col span={12}>
                        <StudentStructureBarChart
                            dId="structureStudentsTwoPart_partOne"
                            unitId="structureStudentsTwoPart_partOne_composite_1"
                            dimensionAndValues={dimensionAndValues}
                        />
                    </Col>
                    <Col span={12}>
                        <StudentBarChart
                            dId="structureStudentsTwoPart_partTwo"
                            unitId="structureStudentsTwoPart_partTwo_composite_1"
                            dimensionAndValues={dimensionAndValues}
                        />
                    </Col>
                    <Col span={24}>
                        <StudentBarChart
                            dId="structureStudentsTwoPart_partThree"
                            unitId="structureStudentsTwoPart_partThree_bar_1"
                            dimensionAndValues={dimensionAndValues}
                        />
                    </Col>
                    <Col span={24}>
                        <StudentPieChart
                            dId="structureStudentsTwoPart_partFour"
                            unitId="structureStudentsTwoPart_partFour_pie_1"
                            dimensionAndValues={dimensionAndValues}
                        />
                    </Col>
                </Row>
            </Card>
        </div>
    );
};

export default CityStructure;
